<template>
	<view class="content">

		<!-- <view class="login_img"><image mode="aspectFill" src="/static/image/iamhe.png"></image></view> -->

		<view class="login_from">
			<u-form :model="HongUser" :rules="rules" ref='myForm'>
				<u-form-item label="姓名" prop="name" labelWidth="100rpx">
					<u-input v-model="HongUser.name" border="surround" clearable></u-input>
				</u-form-item>
				<u-form-item label="手机号" prop="phone" labelWidth="100rpx">
					<u-input v-model="HongUser.phone" border="surround" clearable></u-input>
				</u-form-item>
				<u-form-item label="邮箱" prop="email" labelWidth="100rpx">
					<u-input v-model="HongUser.email" border="surround" clearable></u-input>
				</u-form-item>
				<u-form-item label="密码" prop="userpassword" labelWidth="100rpx">
					<u-input password v-model="HongUser.userpassword" border="surround" clearable></u-input>
				</u-form-item>
				<u-form-item label="确认密码" prop="userpassword1" labelWidth="110rpx">
					<u-input password v-model="HongUser.userpassword1" border="surround" clearable></u-input>
				</u-form-item>
				<u-form-item label="验证码" prop="verCode" labelWidth="100rpx">
					<u-input v-model="HongUser.verCode" border="surround" clearable></u-input>
				</u-form-item>
			</u-form>
			<canvas :style="{width:width+'px',height:height+'px'}" canvas-id="imgcanvas"
				@error="canvasIdErrorCallback"></canvas>
			<button size="mini" @click="refresh()">获取验证码</button>

			<view class="login_from_dl">
				<button @click="denglu">注册</button>
			</view>

			<view class="logo_xieyi">
				<label @click="moutcl()" :class="gouxSta?'cuIcon-squarecheckfill':'cuIcon-square'"></label>
				<view class="logo_text">请勾选并阅读<text>《注册协议》</text>及<text>《隐私协议》</text></view>
			</view>

		</view>

	</view>
</template>
<script>
	export default {

		data() {
			return {
				verCode: "", //验证码
				width: 120,
				height: 45,
				// 地区选择 start 
				//value3: [],
				//label3: '',
				//list1: areaData,
				// 地区选择 end 
				gouxSta: false,
				Qztime: '',
				QzyzmStare: false,
				Qztext: '获取验证码',
				HongUser: {
					name: '',
					userpassword: '',
					phone: '',
					userpassword1: '',
					verCode: "",
					email:''
				},
				rules: {
					'name': [{
						type: 'string',
						required: true,
						message: '请填写用户名',
						trigger: ['blur', 'change']
					}],
					'phone': [{
						
						type: 'string',
						required: true,
						message: '请填写手机号',
						trigger: ['blur', 'change']
					}, {
						type: 'string',
						required: true,
						message: '请输入正确的手机号',
						trigger: ['blur', 'change'],
						min: 11,
						max: 11
					}],
					'userpassword': [{
						type: 'string',
						required: true,
						message: '请填写密码',
						trigger: ['blur', 'change'],
					}],
					'userpassword1': [{
							type: 'string',
							required: true,
							message: '请填写确认密码',
							trigger: ['blur', 'change'],
						},
						{
							trigger: 'blur',
							validator: (rule, value, callback) => {
								if (value !== this.HongUser.userpassword) {
									callback(new Error('两次输入密码不一致'))
								} else {
									callback()
								}
							}
						}
					],
					'verCode': [{
							type: 'string',
							required: true,
							message: '请填写验证码',
							trigger: ['blur', 'change'],
						},
						{
							trigger: 'blur',
							validator: (rule, value, callback) => {
								if (value.toLowerCase() !== this.verCode.toLowerCase()) {
									callback(new Error('验证码不正确'))
								} else {
									callback()
								}
							}
						}
					]
				},

			}
		},
		onLoad() {},
		methods: {

			moutcl() {
				if (this.gouxSta == false) {
					this.gouxSta = true
				} else {
					this.gouxSta = false
				}
			},

			denglu() {
				if (this.gouxSta == false) {
					uni.showToast({
						"title": "请阅读并勾选用户协议",
						"icon": 'none'
					})
				} else {
					this.$refs.myForm.validate().then(res => {
					uni.request({
						url:'http://localhost:8003/userproject/user/create',
						data:{
							name:this.HongUser.name,
							phone:this.HongUser.phone,
							userpassword:this.HongUser.userpassword,
							email:this.HongUser.email,
						},
						method:'POST',
						success:(res) => {
							console.log("验证通过")
							if(res.data.code==20000){
								console.log(res)
								uni.showToast({
									title:'注册成功',
									icon:'success'
								})
								setTimeout(()=>{
									uni.redirectTo({
										url:'/pages/login/login'
									})
								},1000)
							}else{
								uni.showToast({
									title:'用户名已存在或注册失败',
									icon:'error'
								})
							}
						}
					})
					})
				}
			},


			Qzyzm() {
				var num = 60;
				if (this.QzyzmStare == false) {
					this.Qztime = '60';
					this.Qztext = 's后获取';
					this.QzyzmStare = true;
					var interval = setInterval(() => {
						--this.Qztime
					}, 1000)
					setTimeout(() => {
						clearInterval(interval)
						this.Qztext = '获取验证码'
						this.Qztime = ''
						this.QzyzmStare = false
					}, 60000)
				}
			},



			// 所属地区选择 start
			handleTap(picker) {
				this.$refs[picker].show()
			},
			handleChange(e) {
				console.log('change::', e)
			},
			handleConfirm(e) {
				console.log('confirm::', e)
				if (e) {
					const name = e.dataset.name
					const label = e.item.map(m => m.label).join('-')
					if (name && label) {
						this[name] = label
					}
				}
			},
			handleCancel(e) {
				console.log('cancel::', e)
			},
			// 初始化验证码
			init: function() {
				console.log('start');
				var context = uni.createCanvasContext('imgcanvas', this),
					w = this.width,
					h = this.height;
				context.setFillStyle("white");
				context.setLineWidth(5);
				context.fillRect(0, 0, w, h);
				var pool = ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "I", "M", "N", "O", "P", "Q",
						"R", "S",
						"T", "U", "V", "W", "S", "Y", "Z", "1", "2", "3", "4", "5", "6", "7", "8", "9", "0"
					],
					str = '';
				for (var i = 0; i < 4; i++) {
					var c = pool[this.rn(0, pool.length - 1)];
					var deg = this.rn(-30, 30);
					context.setFontSize(18);
					context.setTextBaseline("top");
					context.setFillStyle(this.rc(80, 150));
					context.save();
					context.translate(30 * i + 15, parseInt(h / 1.5));
					context.rotate(deg * Math.PI / 180);
					context.fillText(c, -15 + 5, -15);
					context.restore();
					str += c;
				}
				this.verCode = str,
					console.log(this.verCode)
				// uni.setStorage({
				// 	key: 'imgcode',
				// 	data: str,

				// });
				for (var i = 0; i < 40; i++) {
					context.beginPath();
					context.arc(this.rn(0, w), this.rn(0, h), 1, 0, 2 * Math.PI);
					context.closePath();
					context.setFillStyle(this.rc(150, 200));
					context.fill();
				}
				context.draw();
				console.log('end');
			},
			rc: function(min, max) {
				var r = this.rn(min, max);
				var g = this.rn(min, max);
				var b = this.rn(min, max);
				return "rgb(" + r + "," + g + "," + b + ")";
			},
			rn: function(max, min) {
				return parseInt(Math.random() * (max - min)) + min;
			},
			refresh: function() {
				this.init();
			},
			canvasIdErrorCallback: function(e) {
				console.error(e.detail.errMsg)
			}


			// 所属地区选择 end
		}
	}
</script>
<style lang="scss" scoped>
	page {
		background: #fff;
	}

	.login_img {
		width: 100%;
		height: auto;
		margin-top: 90upx;
	}

	.login_img image {
		width: 170upx;
		height: 170upx;
		display: block;
		margin: 0px auto;
		border-radius: 50%;
	}

	.login_from {
		width: 100%;
		height: auto;
		box-sizing: border-box;
		padding: 20upx 8%;
	}

	.login_from_input {
		width: 100%;
		height: auto;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		border-bottom: 1px #eee solid;
		padding: 40upx 0px;
		margin: 0px auto;
	}

	.login_from_name {
		width: 20%;
	}

	.login_from_fun {
		width: 80%;
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
		align-items: center;
	}

	.login_from_fun input {
		width: 100%;
		text-align: left;
		font-size: 14px;
	}


	.login_from_dl {
		width: 100%;
		height: 50px;
		line-height: 50px;
		margin-top: 150upx;
	}

	.login_from_dl button {
		width: 100%;
		height: 50px;
		line-height: 50px;
		background: #FF3B00;
		color: #fff;
		border-radius: 50px;
	}

	.logo_xieyi {
		width: 100%;
		height: 40px;
		line-height: 40px;
		display: flex;
		flex-direction: row;
		margin-top: 30upx;
		align-items: center;
		color: #444;
		font-size: 14px;
		justify-content: center;
	}

	.logo_xieyi label {
		font-size: 18px;
		margin-right: 1%;
		display: block;
		width: 15px;
		height: 15px;
	}

	.cuIcon-squarecheckfill {
		color: #FF3B00;
	}

	.logo_text text {
		color: #FF3B00;
	}

	.getyzm {
		width: 60%;
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
		color: #FF3B00;
	}

	.cuicon {
		font-size: 18px;
	}

	.regFrom_tom_yzlabel {
		width: 60%;
		text-align: right;
	}

	.cuIcon-squarecheckfill {
		background: #FF3B00;
		position: relative;
		border: 2px #ccc solid;
		box-sizing: border-box;
		border-radius: 3px;
	}

	.cuIcon-square {
		background: #fff;
		border: 2px #ccc solid;
		box-sizing: border-box;
		border-radius: 3px;
	}
</style>
